<template>
    <el-row type="flex" justify="center" style="margin-top:80px;margin-bottom:200px">
    <el-col :span="15">
        
        <el-card class="box-card" >
            <div slot="header" class="clearfix" >
                <el-row>
                        <el-col :span="12"><el-button class="denglu" style="padding: 3px 0;" type="text" icon="el-icon-user" @click="denglu">登录</el-button></el-col>
                        <el-col :span="12"><el-button class="zhuce" style="padding: 3px 0;" type="text" @click="zhuce">注册</el-button></el-col>
                </el-row>
                <!-- <el-button class="denglu" style="padding: 3px 0;" type="text" icon="el-icon-user" @click="denglu" >登录</el-button>
                <el-button class="zhuce" style="padding: 3px 0;" type="text"  @click="zhuce" >注册</el-button> -->
            </div>
            
            <div>
                <el-form ref="form" :model="form" label-width="80px" class="form">
                <el-form-item label="用户名">
                <el-input v-model="form.username"></el-input>
                </el-form-item>

                <el-form-item label="密码">
                <el-input v-model="form.password"></el-input>
                </el-form-item>

                <el-form-item label="手机号">
                <el-input v-model="form.phone"></el-input>
                </el-form-item>

                <el-form-item  label="验证码">
                    <!-- <el-input v-model="form.code">ssss</el-input>
                    <el-button>获取验证码</el-button> -->
                    <el-row>
                        <el-col :span="8"><el-input v-model="code"></el-input></el-col>
                        <el-col :span="16"><el-button @click="getCode">获取验证码</el-button></el-col>
                    </el-row>
                </el-form-item>

                <el-form-item label="角色" prop="role">
                    <el-radio-group v-model="form.role">
                    <el-radio label="1" >我是学生</el-radio>
                    <el-radio label="2" >我是老师</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-button type="success" style="width: 190px" @click="uregister">立即注册</el-button>

            </el-form>
            </div>
        </el-card>
    </el-col>
    </el-row>
    
</template>

<style>

.el-button--text{
 color: #272727;
}
.denglu:hover{
    color:#0f4c81;
    border-color: #758184;
    background-color:#758184;
}

.denglu{
    width: 100%;
    font-size: 30px;
    height: 80px;
    background-color: #758184;
}

.zhuce{
    font-size: 30px;
    height: 80px;
}
.el-card__header{
    padding:0;
}

.clearfix{
    text-align: center;
    height: 80px;
}
.form{
    padding-right: 100px;
    margin: 60px 200px;
    text-align: center;  
}
</style>

<script>
import userApi from '@/api/userApi';
export default {
    data(){
        return {
            form:{},
            code:null,
        }
    },

    methods:{
        uregister(){
            userApi.register(this.form,this.code).then(response => {
                if(response.data.flag){
                    this.$router.push({ path: '/login' })
                }
                else{
                    alert(response.data.message)
                }
            })
        },

        denglu(){
            this.$router.push({ path: '/login' })
        },

        zhuce(){
            this.$router.push({ path: '/register' })
        },

        getCode(){
            console.log(this.form.phone)
            userApi.code(this.form.phone)
        }
    }
}
</script>
